<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id='mask'>
			<div class="center">
				<h2 class="title">
					<img src="./00.png" alt="" />
				</h2>
				
				<img :src="imgArr[index]" alt="" />
				
				<a href="javascript:void(0)" @click="prev" class="left">
					<img src="./prev.png" alt="" />
				</a>
				
				<a href="javascript:void(0)" @click="next" class="right">
					<img src="./next.png" alt="" />
				</a>
				
			</div>
		</div>
		
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>	 
		var app = new Vue({
				 el: "#mask",
				 data: {
					 imgArr: [
						 "./00.JPG",
						 "./01.JPG",
						 "./02.JPG",
						 "./03.JPG",
					 ],
					 index: 0
				 },
				 methods: {
					 prev:function(){
						 this.index--;
					 },
					 next:function(){
						 this.index++;
					 }
				 },
			 })
	    
		
		 </script>
	</body>
</html>